<template>
   <div id="order">
      <van-sticky>
         <van-nav-bar class="title">
            <template #title>
               <div>
                  我的订单
               </div>
            </template>
            <template #right>
               <van-icon name="search" color="#fff" @click="searchVisable = !searchVisable" size="18" />
            </template>
         </van-nav-bar>
         <van-search v-if="this.searchVisable" v-model="searchValue" @search="findOrder" show-action
            placeholder="请输入订单号" @cancel="onCancel" />

      </van-sticky>
      <van-overlay :show="overlayVisable" z-index="2" @click="test">
         <div class="wrapper">
            <van-loading size="24px">
               <span id="loading">数据加载中...</span>
            </van-loading>
         </div>
      </van-overlay>

      <van-tabs v-model="active" sticky animated>
         <van-tab title="全部">
            <OrderTotal :orderList="orderList" @showOrderDetail="showOrderDetail"></OrderTotal>
         </van-tab>
         <van-tab title="已取消">
            <OrderCancel :orderList="OrderCancelList" @showOrderDetail="showOrderDetail"></OrderCancel>
         </van-tab>
         <van-tab title="未支付">
            <OrderNoPay @showInputPay="showInputPay" @upDateStatusById="upDateStatusById" :orderList="noPayOrderList"
               @showOrderDetail="showOrderDetail"></OrderNoPay>
         </van-tab>
         <van-tab title="已支付">
            <OrderPay @upDateStatusById="upDateStatusById" :orderList="OrderPayList" @showOrderDetail="showOrderDetail">
            </OrderPay>
         </van-tab>
         <van-tab title="已完成">
            <OrderComplete :orderList="OrderCompleteList" @showOrderDetail="showOrderDetail"></OrderComplete>
         </van-tab>
      </van-tabs>

      <div style="height:100px">  </div>

      <van-popup class="inputPassword" :close-on-click-overlay="false" :overlay="false" v-model="inputPasswordVisible">
         <p style="text-align: center;margin-top: 10%;font-weight: 500;letter-spacing: 1px;">请输入支付密码</p>
         <p style="text-align: center;margin-top: 5%;font-size: 14px;">金额: {{(order.totalMoney*1.0).toFixed(2)}}元</p>
         <van-password-input style="margin-top: 5%;" :value="password" :focused="showKeyboard"
            @focus="showKeyboard = true" />
      </van-popup>
      <van-number-keyboard theme="custom" close-button-text="完成" v-model="password" :show="showKeyboard"
         @blur="checkPassword" />
   </div>
</template>
<script>
   import request from '@/utils/request';
   import OrderCancel from '@/views/order/components/OrderCancel'
   import OrderComplete from '@/views/order/components/OrderComplete'
   import OrderPay from '@/views/order/components/OrderPay'
   import OrderNoPay from '@/views/order/components/OrderNoPay'
   import OrderTotal from '@/views/order/components/OrderTotal'
   import {
      mapState,
      mapMutations,
      mapActions
   } from 'vuex';
   export default {
      name: '',
      components: {
         OrderNoPay,
         OrderCancel,
         OrderComplete,
         OrderPay,
         OrderTotal,
      },

      data() {
         return {
            searchVisable: false,
            overlayVisable: false,
            searchValue: '',
            active: 0,
            inputPasswordVisible: false,
            showKeyboard: false,
            password: '',
            order: {},
            orderList: [],
         }
      },

      computed: {
         ...mapState('customer', ['customerInfo']),
         noPayOrderList() {
            return this.orderList.filter(item => item.status == "2")
         },
         OrderCancelList() {
            return this.orderList.filter(item => item.status == "8")
         },
         OrderPayList() {
            return this.orderList.filter(item => item.status == "1")
         },
         OrderCompleteList() {
            return this.orderList.filter(item => item.status == "5" || item.status == "7")
         },
      },
      methods: {
         ...mapActions('customer', ['getcustomerInfo','updateCustomerInfo']),

         /**
          * 点击支付
          */
         showInputPay(order) {
            this.order = order
            this.order.totalMoney *= 1.0
            this.inputPasswordVisible = !this.inputPasswordVisible
            this.showKeyboard = !this.showKeyboard
            this.overlayVisable = !this.overlayVisable
         },

         test() {
            if (this.inputPasswordVisible == true) {
               this.inputPasswordVisible = !this.inputPasswordVisible
               this.showKeyboard = !this.showKeyboard
               this.overlayVisable = !this.overlayVisable
            }
         },

         /**
          * 校验密码
          */
         checkPassword() {
            if (this.password.length == 0) {
               return;
            } else if (this.password.length > 0 && this.password.length < 6) {
               Toast("输入密码不够6位")
               return;
            } else {
               if (this.customerInfo.payPassword == this.password) {
                  // 钱不够 订单状态 设为 2. 未支付
                  if (this.customerInfo.balance < this.order.totalMoney) {
                     Dialog.confirm({
                           title: '余额不足',
                           message: '请点击确定，前往充值！',
                        })
                        .then(() => {
                           this.$router.push('/manager/mine')
                        })
                        .catch(() => {
                           // on cancel
                        });
                  } else {
                     this.pay()
                  }
               } else {
                  this.overlayVisable = !this.overlayVisable
                  Toast("密码错误！")
               }
            }
            this.password = ''
            this.inputPasswordVisible = false
            this.showKeyboard = false
            this.overlayVisable = false
         },

         pay() {

            // 5. 剩余支付时间清0
            this.order.remainingTime = 0;

            // 6. 修改订单状态
            this.order.status = 1;

            //7.调后台接口扣减余额
            this.customerInfo.balance -= this.order.totalMoney
            this.updateCustomerInfo({
               customerInfoTemp: this.customerInfo
            })

            this.upDateStatusById(this.order)

         },

         onCancel() {
            this.searchVisable = false;
            this.searchValue = '';

         },
         /**
          * 查询顾客订单信息
          */
         findOrder() {
            this.overlayVisable = true
            request.get('/schoolOrder/app/order/findAllFoodByCustomerId', {
               params: {
                  customerId: this.customerInfo.id
               }
            }).then(
               res => {
                  this.orderList = res.data.data
                  this.overlayVisable = false
               }
            )
         },

         /**
          * 查看食物详情
          * @param {} order 
          */
         showOrderDetail(order) {
            sessionStorage.setItem("orderDetail", JSON.stringify(order))
            this.$router.push("/manager/order/orderDetail");
         },

         /**
          * 更新订单状态
          * @param {} order 
          */
         upDateStatusById(order) {

            request.post("/schoolOrder/app/order/updateOrderById", {
               id: order.id,
               status: order.status,
               foodList:order.foodList,
               num: order.num,
               shopId:order.shopId,
            }).then(
               res => {
                  this.findOrder();
               }
            )
         }

      },
      mounted() {
         this.getcustomerInfo()
         setTimeout(() => {
            this.findOrder()
            
         }, 1000);
         
         sessionStorage.setItem('curActive', 1);
      },

   }
</script>
<style>
   .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

   #loading {
      color: grey;
   }


   .title {
      background-color: #ffd103;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      height: 40px;
   }

   .title div {
      color: gray
   }

   .van-tabs__line {
      background-color: gold;
   }

   #order {
      width: 100%;
      background-color: rgba(200, 200, 200, 0.068);
      box-sizing: border-box;
   }

   .inputPassword {
      padding: 5%;
      width: 250px;
      height: 150px;
      margin-left: 0px;
      margin-top: -80px;
   }
</style>